﻿@model CalligraphyWeb.Models.EditorModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_EditorLayout.cshtml";
}

<div class="content relative">
    <div class="ic"></div>
        <div class="">
            <article class="editor">
                <section id="side-nav" class="editor-nav">
                    <div class="side-menu">
                        <ul class="side-nav">
                            <li><a id="nav-new" href="@Url.Action("Index", "Editor")">New</a></li>
                            <li><a id="nav-new-with-template" data-bind="click: openTemplatesBox">New With Template</a></li>
                            <li><a id="nav-load" data-bind="click: openProjectsBox">Load</a></li>
                        </ul>
                    </div>
                </section>
                <div id="gui" class="editor-gui">
                    <div class="save-div tpl-save-div" style="display: none">
                        <div>
                            <input id="tbTemplateName" type="text" data-bind="value: templateName" placeholder="Template name" />
                            <br />
                            <span class="field-validation-error" data-bind="style: { display: templateName().length == 0 ? 'inline' : 'none' }">Please input template name</span>
                            <br /><br />
                            <input id="tbTemplateDescription" type="text" data-bind="value: templateDescription" placeholder="Template description" />
                            <br />
                            <span class="field-validation-error" data-bind="style: { display: templateDescription().length == 0 ? 'inline' : 'none' }">Please input description</span>
                            <br /><br />
                            <button class="btn btn-1" data-bind="click: saveTemplate">Save</button>
                            <button class="btn btn-1" data-bind="click: cancelTemplate">Cancel</button>
                        </div>
                    </div>
                    <div class="save-div prj-save-div" style="display: none">
                        <div>
                            <input id="tbProjectName" type="text" data-bind="value: projectName" placeholder="Project name" />
                            <br />
                            <span class="field-validation-error" data-bind="style: { display: projectName().length == 0 ? 'inline' : 'none' }">Please input project name</span>
                            <br /><br />
                            
                            <button class="btn btn-1" data-bind="click: saveItem">Save</button>
                            <button class="btn btn-1" data-bind="click: cancelSaveItem">Cancel</button>
                        </div>
                    </div>
                    <div class="bg-select box-select">
                        <div class="box-header">
                            <ul>
                                <li id="bg-gallery" data-bind="click: backgroundControlTabChanged">Gallery</li>
                                <li id="bg-upload" data-bind="click: backgroundControlTabChanged">Your Computer</li>
                                <li id="bg-url" data-bind="click: backgroundControlTabChanged">Url</li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        
                        <div class="box-contain">
                            <div class="box-gallery bg-gallery">
                                <h4>Your Gallery</h4>
                                <ul id="galleries" data-bind="foreach: Galleries">
                                    <li ><a data-bind="attr: {
                                        index: $index, id: 'g-' + $parent.Galleries.indexOf($data)
                                        }, click: $parent.backgroundSelect">
                                            <img data-bind="attr: { src: url, alt: name }"  />
                                            <p data-bind="text: name"></p>
                                        </a>
                                    </li>
                                </ul>
                                <div class="clear"></div>
                                <h4>Common Gallery</h4>
                                <ul id="common-galleries" data-bind="foreach: CommonGalleries">
                                    <li ><a data-bind="attr: {
                                            index: $index, id: 'cg-' + $parent.CommonGalleries.indexOf($data)
                                            }, click: $parent.backgroundSelect">
                                            <img data-bind="attr: { src: url, alt: name }"  />
                                            <p data-bind="text: name"></p>
                                        </a>
                                    </li>
                                </ul>
                                <p class="center"><button class="btn btn-1" data-bind="click: backgroundOK">OK</button>
                                <button class="btn btn-1 btn-bg-cancel" data-bind="click: backgroundCancel">Cancel</button></p>
                                
                            </div>
                            <div class="clear"></div>
                            <div class="bg-upload">
                                @using (Html.BeginForm("UploadImageFromComputer", "Editor", FormMethod.Post, new { enctype = "multipart/form-data", id = "uploadFromComputerForm" }))
                                {
                                    <label for="tb-upload">Load image from your computer</label>
                                    <input type="file" name="file" id="tb-upload" />
                                    <p class="center">
                                    <button class="btn btn-1" data-bind="click: uploadBackground">Upload</button>
                                    <button class="btn btn-1 btn-bg-cancel" data-bind="click: backgroundCancel">Cancel</button></p>
                                }
                            </div>
                            <div class="bg-url">
                                    <label for="tb-bgUrl">Input image link</label>
                                    <input name="bg-url" id="tb-bgUrl" data-bind="value: backgroundDownloadUrl" /><br />
                                    <span class="field-validation-error" data-bind="style: { display: backgroundDownloadMessage().length == 0 ? 'none' : 'inline' }, text: backgroundDownloadMessage"></span>
                            
                                    <p class="center">
                                        <button class="btn btn-1" data-bind="click: downloadBackground">Upload</button> 
                                        <button class="btn btn-1 btn-bg-cancel" data-bind="click: backgroundCancel">Cancel</button></p>
                                  
                            </div>
                        </div>
                    </div>
                    @Html.Partial("_TemplatesPartial")
                    @Html.Partial("_ProjectsPartial")
                    <div class="editor-main">
                        <div id="ed-scr" class="editor-screen"  data-bind="foreach: itemControls" >
                                <li data-bind="attr: { id: 'tctrl-' + $index() }, style: {
                                left: C_left() + 'px', top: C_top() + 'px', width: width() + 'px', height: height() + 'px'
                                    }">
                                    <textarea style="display: none;" data-bind="attr: { id: 'cearea-' + $index() },
                                value: text, style: {
                              textAlign: getAlignStyle, fontStyle: getItalicStyle,
                              fontWeight: getBoldStyle, color: '#' + foreground(),
                              left: 0, top: 0, width: width() + 'px', height: height() + 'px', fontFamily: fontFamily(),
                              fontSize: (fontSize()/$root.ratio) + 'px'
                                    }"></textarea>
                                    <span data-bind="text: text, style: {
                                        textAlign: getAlignStyle, fontStyle: getItalicStyle,
                                        fontWeight: getBoldStyle, color: '#' + foreground(),
                                        left: 0, top: 0, width: width() + 'px', height: height() + 'px', fontFamily: fontFamily(),
                                        fontSize: (fontSize() / $root.ratio) + 'px'
                                    }"></span>
                                    <button class="tctrl-edit" data-bind="attr: { id: 'cebtn-' + $index() }, click: $root.textControlEdit">Edit</button>
                                    <button class="tctrl-delete" data-bind="attr: { id: 'cebtn-' + $index() }, click: $root.textControlDelete">X</button>
                                </li>  
                        </div>
                    </div>
                    <div class="editor-controls">
                        <ul class="side-nav">
                            <li><a title="Font Size">
                                <span class="icon"><input id="fontSizetb" class="small-number-input" data-bind="value: fontSize"/></span><span>Font Size</span></a></li> 
                            <li><a id="editorColorPicker" class="pointer">
                                <span class="icon">
                                    <input type="hidden" id="colorValue" value="000000" />
                                </span>
                                <span>Color</span></a>
                            </li>
                            <li><a  class="pointer" data-bind="click: backgroundShow">
                                <span class="icon">
                                    <img class="editor-bg" src="~/Content/img/noimg.png"/>
                                </span>
                                <span>Background</span></a></li>
                            <li><a><span class="icon">
                                @Html.DropDownList("dd-font", Model.FontFamiliesList, null, new Dictionary<string, object>() { {"class", "editor-dd"}, 
                                    {"data-bind", "selectedOptions: font, event: {change: changeFont}"}})
                                </span>
                                <span>Font Family</span></a></li>
                            <li><a  class="pointer" data-bind="click:newTextControl">
                                <span class="icon"><span class="text-icon"></span></span>
                                <span>Text</span></a></li>
                            <li><a>
                                <span id="align-controls" class="icon full-width">
                                  
                                    <button class="left-icon" data-bind="click: function () { setAlign(2); }"></button>
                                    <button class="center-icon" data-bind="click: function () { setAlign(0); }"></button>
                                    <button class="right-icon" data-bind="click: function () { setAlign(3); }"></button>
                                    <button class="justify-icon" data-bind="click: function () { setAlign(1); }"></button>
                               </span>
                               </a>
                                <div class="clear"></div>
                            </li>
                                
                            <li>
                                <a class="no-hover"><button id="bold-control" class="bold-icon" data-bind="click: setBold">B</button>
                                <button id="italic-control" class="italic-icon" data-bind="click: setItalic">I</button></a>
                                
                            </li>
                        </ul>
                    </div>
                    <div class="editor-btns">
                        <button class="btn btn-1" data-bind="click: openSaveItemBox">Save</button>
                        <button class="btn btn-1" data-bind="click: exportImage">Export Image</button>
                        <button class="btn btn-1" data-bind="click: openTemplateBox">Save as Template</button>
                        <a id="aPreview" style="display: none"></a>
                    </div>
                </div>
            </article>
    </div>
</div>

@section Scripts {
    <script src="~/Scripts/jpicker-1.1.6.js"></script>
    <script src="~/Content/js/functions.js"></script>
    <script src="~/Content/js/editor.viewmodel.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#ed-area').draggable();
        });
    </script>
}

@section Styles {
    @foreach (var iter in Model.FontFamilies)
    {

        @Html.Raw("@font-face {")
        @Html.Raw("  font-family: '" + iter.name +  "';")
        @Html.Raw("  font-style: normal; ")
        @Html.Raw("  src: url('/Data/Fonts/" + iter.filename + "') format('truetype');")
        @Html.Raw("}")
    }
    
    }